<template>
  <div class="comparison-container">
    <div :class="{'is-mobile':isMobile}" class="comparison-title">
      <div style="margin-right: 10px;"><SectionTitle title="数据对比" /></div>
      <div class="table-tip"><span>{{ titleTip }}</span></div>
      <el-date-picker
        v-model="rangeDate"
        :picker-options="pickerOptions()"
        format="yyyy/MM/dd"
        type="daterange"
        size="small"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dataChange"/>
    </div>
    <el-table
      :data="comparisonData.list"
      header-cell-class-name="dynamic-edit-table-cell"
      class="fb-table"
      empty-text="暂无数据"
      border
      fit>
      <el-table-column align="center" label="" width="100">
        <template slot-scope="scope">
          {{ scope.row['name'] }}
        </template>
      </el-table-column>
      <el-table-column width="100" label="">
        <template slot="header" slot-scope="scope">
          <div class="flex-center">
            <span class="label">剩余库存</span>
            <el-tooltip content="当日快照值，不含后期修改" placement="top">
              <tipIcon is-diy class="ml5"/>
            </el-tooltip>
          </div>
        </template>
        <template slot-scope="scope">
          {{ scope.row['inventoryRemaining'] | filterNon }}
        </template>
      </el-table-column>
      <el-table-column label="入库单数量" width="100">
        <template slot-scope="scope">
          <span :class="scope.$index === 2 && 'action-cell'" @click="showStockDetail(scope.$index, true)">
            {{ scope.row['stockInOrderQuantity'] | filterNon }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="入库商品数量" width="100">
        <template slot-scope="scope">
          {{ scope.row['stockInProductQuantity'] | filterNon }}
        </template>
      </el-table-column>
      <el-table-column label="订单数量(出库单数量)" width="160">
        <template slot-scope="scope">
          <span :class="scope.$index === 2 && 'action-cell'" @click="showStockDetail(scope.$index, false)">
            {{ scope.row['orderQuantity'] | filterNon }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="已发货订单数量" width="120">
        <template slot-scope="scope">
          {{ scope.row['stockOutOrderQuantity'] | filterNon }}
        </template>
      </el-table-column>
      <el-table-column label="出库商品数量" width="100">
        <template slot-scope="scope">
          {{ scope.row['stockOutProductQuantity'] | filterNon }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// components
import SectionTitle from '@/components/Title';
import { pickerOptions } from '../../utils';

export default {
  components: {
    SectionTitle
  },
  filters: {
    filterNon(val) {
      return (val !== 0 && !val) ? '--' : val;
    }
  },
  props: {
    comparisonData: {
      type: Object,
      default: () => ({
        list: [],
        deadline: ''
      })
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rangeDate: ''
    };
  },
  computed: {
    titleTip() {
      return `以下数据统计截止时间${this.comparisonData.deadline || '--'}`;
    }
  },
  mounted() {
    this.$emit('dataChange');
  },
  methods: {
    pickerOptions,
    showStockDetail(index, isStockIn) {
      if (index !== 2) return;
      this.$emit('showStockDetailDialog', isStockIn);
    },
    dataChange() {
      this.$emit('dataChange', this.rangeDate);
    }
  }
};
</script>

<style lang="scss" scoped>
.comparison-container {
  margin-bottom: 32px;
  &::v-deep {
    .el-date-editor {
      width: 260px;
      .el-range-editor--small .el-range-input {
        font-size: 14px;
      }
    }
    .el-range-separator {
      width: 22px;
    }
    .el-table__row {
      td:first-child {
        background-color: #F9F9F9;
        font-weight: bold;
      }
    }
    .el-table--group::after, .el-table--border::after {
      width: 0;
    }
    .el-table thead.is-group th {
      background-color: #F9F9F9 !important;
    }
    .el-table {
      thead {
        th.el-table__cell {
          background-color: #F9F9F9 !important;
        }
      }
    }
  }
  .action-cell {
    cursor: pointer;
    color: #406eff;
  }
}
.comparison-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  &.is-mobile {
    display: block;
    .table-tip {
      margin: 10px 0;
    }
  }
  .table-tip {
    font-size: 14px;
    color: #999;
    flex: 1;
  }
}
</style>
